﻿@{
    Layout = "~/Views/Shared/_VueLayout.cshtml";

}
<script src="~/axios/axios.js"></script>
<div class="container" id="app" >
    <div class="content" >
        @*<div class="item item-center"><span>昨天 12:35</span></div>
            <div class="item item-center"><span>你已添加了凡繁烦，现在可以开始聊天了。</span></div>
            <div class="item item-left"><div class="avatar"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=25668084,2889217189&fm=26&gp=0.jpg" /></div><div class="bubble bubble-left">您好,我在武汉，你可以直接送过来吗，我有时间的话，可以自己过去拿<br />！！！<br />123</div></div>
        *@
        <div class="item item-right"><div class="bubble bubble-right">hello,OpenAi<br />我想知道一些问题</div><div class="avatar"><img src="~/img/54.png" /></div></div>
        <div class="item item-left"><div class="avatar"><img src="~/img/54.png" /></div><div class="bubble bubble-left">您好！<br />请输入你想知道的问题</div></div>
    </div>
    <div class="input-area">
        <textarea name="text" id="textarea"></textarea>
        <div class="button-area">
            @*<button id="send-btn" onclick="send()">发 送</button>*@
            <el-button type="text" class="bt" @@click="Send">发 送</el-button>
        </div>
    </div>
</div>

<div id="idOuterDiv" class="CsOuterDiv">

</div>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .container {
        margin-top:-80px;
        height: 600px;
        width: 900px;
        border-radius: 4px;
        border: 0.5px solid #e0e0e0;
        background-color: #f5f5f5;
        display: flex;
        flex-flow: column;
        overflow: hidden;

        position:absolute;
        top:50%;
        left:50%;
        transform:translateX(-50%) translateY(-50%);
        -moz-transform:translateX(-50%) translateY(-50%);
        -webkit-transform:translateX(-50%) translateY(-50%);
        -ms-transform:translateX(-50%) translateY(-50%);
        border-radius:5px;
    }

    .content {
        width: calc(100% - 40px);
        padding: 20px;
        overflow-y: scroll;
        flex: 1;
    }

        .content:hover::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.1);
        }

    .bubble {
        max-width: 400px;
        padding: 10px;
        border-radius: 5px;
        position: relative;
        color: #000;
        word-wrap: break-word;
        word-break: normal;
    }

    .item-left .bubble {
        margin-left: 15px;
        background-color: #fff;
    }

        .item-left .bubble:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-top: 10px solid transparent;
            border-right: 10px solid #fff;
            border-bottom: 10px solid transparent;
            left: -20px;
        }

    .item-right .bubble {
        margin-right: 15px;
        background-color: #9eea6a;
    }

        .item-right .bubble:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid #9eea6a;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            right: -20px;
        }

    .item {
        margin-top: 15px;
        display: flex;
        width: 100%;
    }

        .item.item-right {
            justify-content: flex-end;
        }

        .item.item-center {
            justify-content: center;
        }

            .item.item-center span {
                font-size: 12px;
                padding: 2px 4px;
                color: #fff;
                background-color: #dadada;
                border-radius: 3px;
                -moz-user-select: none; /*火狐
                    -webkit-user-select:none; /*webkit浏览器*/
                -ms-user-select: none; /*IE10*/
                -khtml-user-select: none; /*早期浏览器*/
                user-select: none;
            }

    .avatar img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
    }

    .input-area {
        border-top: 0.5px solid #e0e0e0;
        height: 150px;
        display: flex;
        flex-flow: column;
        background-color: #fff;
    }

    textarea {
        flex: 1;
        padding: 5px;
        font-size: 14px;
        border: none;
        cursor: pointer;
        overflow-y: auto;
        overflow-x: hidden;
        outline: none;
        resize: none;
    }

    .button-area {
        display: flex;
        height: 40px;
        margin-right: 10px;
        line-height: 40px;
        padding: 5px;
        justify-content: flex-end;
    }

    .bt {
        width: 80px;
        border: none;
        outline: none;
        border-radius: 4px;
        float: right;
        cursor: pointer;
    }
</style>

<script>
   function dragFunc(id) {
    var Drag = document.getElementById(id);
    Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - Drag.offsetLeft;
        var disY = ev.clientY - Drag.offsetTop;
        document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
        };
    };
    Drag.onmouseup = function() {
        document.onmousemove = null;
        this.style.cursor = "default";
    };
};
dragFunc("app");
    var vueApp = undefined;
    var vm = new Vue({
        el: '#app',
        data: function () {
            vueApp = this;
            return {

            };
        },
        filters: {

        },
        created() {
        
        },
        methods: {
            GetSend(msg) {
                axios.post('/Tool/GetSend',
                    {
                        msg:msg,
                    }).then(function (response) {
                    vueApp.Reply(response.data.data);
                    return response.data.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            sendMsg(msg) {
                axios.post('https://api.openai.com/v1/completions', {
                    prompt: msg, max_tokens: 2048, model: "text-davinci-003"
                }, {
                    headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' +"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" }
                }).then(res => {

                    let text = res.data.choices[0].text.replace("openai:", "").replace("openai：", "").replace(/^\n|\n$/g, "");
                    console.log(text);
                    vueApp.Reply(text);
                }).catch(function (error) {
                    vueApp.Reply("出问题了");
                    vueApp.Reply("error");
                });

            },
            Send(){
                let text = document.querySelector('#textarea').value;
                if(!text){
                    //alert('请输入内容');
                    return ;
                }
                let item = document.createElement('div');
                item.className = 'item item-right';
                item.innerHTML = `<div class="bubble bubble-left">${text}</div><div class="avatar"><img src="/img/54.png" /></div>`;
                document.querySelector('.content').appendChild(item);
                document.querySelector('#textarea').value = '';
                document.querySelector('#textarea').focus();
                //滚动条置底
                let height = document.querySelector('.content').scrollHeight;
                document.querySelector(".content").scrollTop = height;

                vueApp.sendMsg(text);
            },
            Reply(text) {

                let item = document.createElement('div');
                item.className = 'item item-left';
                item.innerHTML =`<div class="item item-left"><div class="avatar"><img src="/img/54.png" /></div><div class="bubble bubble-left">${text}</div></
                div >` ;
                document.querySelector('.content').appendChild(item);
                //滚动条置底
                let height = document.querySelector('.content').scrollHeight;
                document.querySelector(".content").scrollTop = height;
            }
        }
    });
</script>